<template>
    <div>
        <div class="cli">
            <img class="str" src="../../assets/下载.png" alt="">
            <div class="moot">立即登录</div>
        </div>

            <div class="todo">
                <div class="clto">
                    <img src="../../assets/下载 (1).png" alt="">
                    <p class="pl"> 电影订单</p>
                   
                </div>
                 <div class="clto">
                    <img src="../../assets/下载 (2).png" alt="">
                    <p class="pl">商品订单</p>
                </div>
            </div>

                <div class="plyt">
                  <div> 
                      <img class="tolo" src="../../assets/logo (1).png" alt="">
                  </div>
                  <div><p class="muto">卖座券</p></div>
                  <div></div>
                </div>

                    <div class="plyt">
                  <div> 
                      <img class="tolo" src="../../assets/logo (2).png" alt="">
                  </div>
                  <div><p class="muto">组合红包</p></div>
                  <div></div>
                </div>

                     <div class="plyt">
                  <div> 
                      <img class="tolo" src="../../assets/下载 (3).png" alt="">
                  </div>
                  <div><p class="muto lik">余额</p></div>
                  <div class="cln">￥0</div>
                </div>

                 <div class="plyt">
                  <div> 
                      <img class="tolo" src="../../assets/下载 (4).png" alt="">
                  </div>
                  <div><p class="muto">设置</p></div>
                  <div></div>
                </div>
             


    </div>
</template>

<script>
export default {
  

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style  scoped>
.cli{
    width: 100%;
    height: 300px;
    background-color:#ff5f16 ;
}
.str{
    width: 130px;
    height: 130px;
    margin-top: 80px;
    margin-left: 70px;
    border-radius: 50%;
}
.moot{
    font-size: 35px;
    margin-left: 250px;
    color: honeydew;
    margin-top: -90px;
}
.todo{
    width: 100%;
    height: 150px;
    border: 0px solid red;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.pl{
    font-size: 27px;
    color: #797d82;
}
.plyt{
    width: 100%;
    height: 100px;
    border: 0px solid red;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}
.tolo{
    margin-left: -120px;
    margin-top: 10px;
}
.muto{
    font-size: 32px;
    color:  #191a1b;
    margin-top: 25px;
    margin-left: -270px;
}
.cln{
    position: relative;
    font-size: 30px;
    margin-top: 30px;
    color: honeydew;
    left: 30px;
}
.lik{
    position: relative;
    left: 19px;
}
</style>